<template>
    <div v-for="item in goods" :key="item.id">
        <img v-lazy="item.img_url" style="width: 80px;">
        <span> {{ item.title }} </span>
    </div>
    <!--  loading loading-text="加载中..." -->
    <van-button 
        :class="{ 'my-disabled': isFinish }" 
        block :type="isFinish ? 'default' : 'success'" 
        :disabled="isFinish"
        @click="loadMore" :loading="isLoading" 
        :loading-text="isLoading ? '加载中...' : ''">
        {{ isFinish ? '暂无更多数据' : '加载更多' }}
    </van-button>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import axios from 'axios'

const goods = ref([])
const page = ref(1)
const pagesize = ref(5)
const isFinish = ref(false) // 代表数据是否请求完毕
const isLoading = ref(false) // 代表是否在加载数据

onMounted(() => {
    fetchGoodsListData()
})

// ajax获取商品
const fetchGoodsListData = async () => {
    isLoading.value = true // 加载中
    let { data } = await axios.get(`http://47.98.187.80:5000/api/recommend?page=${page.value}&limit=${pagesize.value}`)
    if (data.message.length < pagesize.value) {
        // 说明此页面数据已经加载完毕了，也代表下一页没有数据了
        isFinish.value = true

    }
    goods.value = [...goods.value, ...data.message]
    isLoading.value = false // 加载结束
}

// 加载更多
const loadMore = async () => {
    page.value++
    fetchGoodsListData()
}
</script>
<style scoped>
.my-disabled {
    background-color: #727272;
    border-width: 0;
}
</style>